var layer = window.parent.sgworld.ProjectTree.getObject(window.localStorage.getItem('itemid'));
var app = new Vue({
    el: "#app",
    data() {
        return {
            itemid: window.localStorage.getItem('itemid'),
            type: window.localStorage.getItem('type'),
            isFirst: true,
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577'
            ],
            layertype: "",
            layertypes: [],
            //layer: layer,
            pointColor: "", //点颜色
            pointOutlineColor: "", //点边框颜色
            pointOutlineWidth: 0, //点边框宽度
            pointPixelSize: 0, //点大小
            pointHeight: 0,
            heightReference: 0, // 高度类型 目前无效
            heightReferences: [{
                    label: "无",
                    value: 0
                },
                {
                    label: "贴地表",
                    value: 1
                },
                {
                    label: "相对地表",
                    value: 2
                }
            ],
            pointDistanceDisplayMaxCondition: 0, // 最大可视距离
            pointDistanceDisplayMinCondition: 0, // 最小可视距离

            ///label样式属性
            labelText: "",
            labelText1: "",
            labelText1s: [],
            labelStyles: 0,
            labelStyless: [{
                    label: "填充",
                    value: 0
                },
                {
                    label: "边框",
                    value: 1
                },
                {
                    label: "边框与填充",
                    value: 2
                },
            ],
            labelFillColor: "#ffffff",
            labelOutlineColor: "#000000",
            labelOutlineWidth: 1,
            labelFontSize: 12,
            labelBackground: false,
            labelBackgroundColor: "#000000",
            labelHorizontalOrigin: 0,
            labelHeight: undefined,
            horizontalOrigins: [{
                    label: '居中',
                    value: 0
                },
                {
                    label: '左',
                    value: 1
                },
                {
                    label: '右',
                    value: 2
                }
            ],
            labelVerticalOrigin: 0,
            verticalOrigins: [{
                    label: '顶部',
                    value: -1
                },
                {
                    label: '居中',
                    value: 0
                },
                {
                    label: '底部',
                    value: 1
                },
                {
                    label: 'baseline',
                    value: 2
                }
            ],
            labelDistanceDisplayMaxCondition: 0,
            labelDistanceDisplayMinCondition: 0,

            ///图片样式及属性
            billboardImage: "",
            billboardColor: "#ffffff",
            billboardScale: undefined,
            billboardWidth: undefined,
            billboardPHeight: undefined,
            billboardHeightReference: 0,
            billboardDistanceDisplayMaxCondition: 0,
            billboardDistanceDisplayMinCondition: 0,

            //模型样式及属性
            modelUri: "",
            modelScale: 1,
            modelColor: undefined,
            modelLightColor: undefined,
            modelHeight: undefined,
            modelHeightReference: 0,
            modelDistanceDisplayMaxCondition: 0,
            modelDistanceDisplayMinCondition: 0,

            // 线样式及属性
            polylinemMterial: "#ffffff",
            polylinemArcType: 0,
            polylineWidth: 1,
            polylineDistanceDisplayMaxCondition: 0,
            polylineDistanceDisplayMinCondition: 0,

            //面的样式及属性
            polygonFill: true,
            polygonMaterial: "#ffffff",
            polygonOutline: false,
            polygonOutlineColor: "#ffffff",
            polygonOutlineWidth: 1,
            polygonHeight: 0,
            polygonHeightReference: 0,
            polygonExtrudedHeight: 0,
            polygonExtrudedHeightReference: 0,
            polygonDistanceDisplayMaxCondition: 0,
            polygonDistanceDisplayMinCondition: 0
        }
    },
    mounted() {
        var _this = this;
        this.$nextTick(function () {
            if (_this.itemid) {
                _this.layertypes = layer.getTypes();
                _this.layertype = layer.getType().value;
                _this.chagelayerType();
                //点样式及属性
                if (_this.layertype == "pointLayer") {
                    _this.pointColor = layer.pointColor;
                    _this.pointOutlineColor = layer.pointOutlineColor;
                    _this.pointOutlineWidth = layer.pointOutlineWidth;
                    _this.pointPixelSize = layer.pointPixelSize;
                    _this.pointHeight = layer.pointHeight;
                    _this.heightReference = layer.pointHeightReference;
                    _this.pointDistanceDisplayMaxCondition = layer.pointDistanceDisplayMaxCondition;
                    _this.pointDistanceDisplayMinCondition = layer.pointDistanceDisplayMinCondition;
                }
                //文本样式技属性
                else if (_this.layertype == "labelLayer") {
                    _this.labelText = layer.labelText;
                    _this.labelText1s = layer.getProperties();
                    _this.labelStyles = layer.labelStyles == undefined ? 0 : layer.labelStyles;
                    _this.labelFillColor = layer.labelFillColor;
                    _this.labelOutlineColor = layer.labelOutlineColor;
                    _this.labelOutlineWidth = layer.labelOutlineWidth;
                    _this.labelFontSize = layer.labelFontSize;
                    _this.labelBackground = layer.labelBackground;
                    _this.labelBackgroundColor = layer.labelBackgroundColor;
                    _this.labelHorizontalOrigin = layer.labelHorizontalOrigin;
                    _this.labelHeight = layer.labelHeight;
                    _this.labelVerticalOrigin = layer.labelVerticalOrigin;
                    _this.labelDistanceDisplayMaxCondition = layer.labelDistanceDisplayMaxCondition;
                    _this.labelDistanceDisplayMinCondition = layer.labelDistanceDisplayMinCondition;
                }
                //billboard样式及属性
                else if (_this.layertype == "billboardLayer") {
                    _this.billboardImage = layer.billboardImage;
                    _this.billboardColor = layer.billboardColor;
                    _this.billboardScale = layer.billboardScale;
                    _this.billboardWidth = layer.billboardWidth;
                    _this.billboardPHeight = layer.billboardPHeight;
                    _this.billboardHeightReference = layer.billboardHeightReference;
                    _this.billboardDistanceDisplayMaxCondition = layer.billboardDistanceDisplayMaxCondition;
                    _this.billboardDistanceDisplayMinCondition = layer.billboardDistanceDisplayMinCondition;
                }
                //model样式及属性
                else if (_this.layertype == "modelLayer") {
                    _this.modelUri = layer.modelUri;
                    _this.modelScale = layer.modelScale;
                    _this.modelColor = layer.modelColor;
                    _this.modelHeight = layer.modelHeight;
                    _this.modelLightColor = layer.modelLightColor;
                    _this.modelHeightReference = layer.modelHeightReference;
                    _this.modelDistanceDisplayMaxCondition = layer.modelDistanceDisplayMaxCondition;
                    _this.modelDistanceDisplayMinCondition = layer.modelDistanceDisplayMinCondition;
                }
                //线的样式及属性
                else if (_this.layertype == "polylineLayer") {
                    _this.polylinemMterial = layer.polylinemMterial;
                    _this.polylinemArcType = layer.polylinemArcType;
                    _this.polylineWidth = layer.polylineWidth;
                    _this.polylineDistanceDisplayMaxCondition = layer.polylineDistanceDisplayMaxCondition;
                    _this.polylineDistanceDisplayMinCondition = layer.polylineDistanceDisplayMinCondition;
                }
                //面的样式及属性
                else if (_this.layertype == "polygonLayer") {
                    _this.polygonFill = layer.polygonFill;
                    _this.polygonMaterial = (layer.polygonMaterial == undefined ? "#ffffff" : layer.polygonMaterial);
                    _this.polygonOutline = layer.polygonOutline;
                    _this.polygonOutlineColor = layer.polygonOutlineColor;
                    _this.polygonOutlineWidth = layer.polygonOutlineWidth;
                    _this.polygonHeight = layer.polygonHeight;
                    _this.polygonHeightReference = layer.polygonHeightReference;
                    _this.polygonExtrudedHeight = layer.polygonExtrudedHeight;
                    _this.polygonExtrudedHeightReference = layer.polygonExtrudedHeightReference;
                    _this.polygonDistanceDisplayMaxCondition = layer.polygonDistanceDisplayMaxCondition;
                    _this.polygonDistanceDisplayMinCondition = layer.polygonDistanceDisplayMinCondition;
                }
                setTimeout(function () {
                    _this.isFirst = false;
                }, 1000);
            }
        });
    },
    methods: {
        chagelayerType() {
            console.log(this.layertype);
            $('.pointLayer').fadeOut();
            $('.labelLayer').fadeOut();
            $('.billboardLayer').fadeOut();
            $('.modelLayer').fadeOut();
            $('.polylineLayer').fadeOut();
            $('.' + this.layertype).fadeIn();
            switch (this.layertype) {
                case "labelLayer":
                    layer.labelShow = true;
                    layer.modelShow = false;
                    layer.billboardShow = false;
                    layer.pointShow = false;
                    break;
                case "pointLayer":
                    layer.labelShow = false;
                    layer.billboardShow = false;
                    layer.pointShow = true;
                    layer.modelShow = false;
                    break;
                case "modelLayer":
                    layer.labelShow = false;
                    layer.billboardShow = false;
                    layer.pointShow = false;
                    layer.modelShow = true;
                    break;
                case "billboardLayer":
                    layer.labelShow = false;
                    layer.billboardShow = true;
                    layer.pointShow = false;
                    layer.modelShow = false;
                    break;
                case "circleLayer":
                    break;
                case "polylineLayer":
                    layer.polylineShow = true;
                    break;
            }
        },
        billboardImageC() {
            $('#files').click();
        },
        fileInputExp() {
            // this.fileImport();
            var selectedFile = document.getElementById('files').files[0];
            var name = selectedFile.name; //读取选中文件的文件名
            var size = selectedFile.size; //读取选中文件的大小
            //console.log("文件名:"+name+"大小:"+size);
            var reader = new FileReader(); //这是核心,读取操作就是由它完成.
            reader.readAsBinaryString(selectedFile); //读取文件的内容,也可以读取文件的URL
            reader.onload = function () {
                //当读取完成后回调这个函数,然后此时文件的内容存储到了result中,直接操作即可
                console.log(this.result);
                this.billboardImage = this.result;
            }
        }
    },
    watch: {
        //点样式及属性的监听
        pointColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.pointColor = newval;
        },
        pointOutlineColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.pointOutlineColor = newval;
        },
        pointOutlineWidth(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.pointOutlineWidth = newval;
        },
        pointPixelSize(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.pointPixelSize = newval;
        },
        pointHeight(newVal, oldVal) {
            if (newVal == undefined) return;
            if (this.isFirst) return;
            layer.pointHeight = newVal;
        },
        heightReference(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.heightReference = newval;
        },
        pointDistanceDisplayMaxCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.pointDistanceDisplayMaxCondition = newval;
        },
        pointDistanceDisplayMinCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.pointDistanceDisplayMinCondition = newval;
        },

        //文本样式技属性
        labelText(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelText = newval;
        },
        //文本样式技属性
        labelText1(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            this.labelText = this.labelText1;
        },
        labelStyles(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelStyles = newval;
        },
        labelFillColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelFillColor = newval;
        },
        labelHeight(newVal, oldVal) {
            if (newVal == undefined) return;
            if (this.isFirst) return;
            layer.labelHeight = newVal;
        },
        labelOutlineColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelOutlineColor = newval;
        },
        labelOutlineWidth(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelOutlineWidth = newval;
        },
        labelFontSize(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelFontSize = newval;
        },
        labelBackground(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelBackground = newval;
        },
        labelBackgroundColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelBackgroundColor = newval;
        },
        labelHorizontalOrigin(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelHorizontalOrigin;
        },
        labelVerticalOrigin(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelVerticalOrigin = newval;
        },
        labelDistanceDisplayMaxCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelDistanceDisplayMaxCondition = newval;
        },
        labelDistanceDisplayMinCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.labelDistanceDisplayMinCondition = newval;
        },

        //billboard样式及属性
        billboardImage(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardImage = newval;
        },
        billboardColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardColor = newval;
        },
        billboardScale(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardScale = newval;
        },
        billboardWidth(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardWidth = newval;
        },
        billboardPHeight(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardPHeight = newval;
        },
        billboardHeightReference(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardHeightReference = newval;
        },
        billboardDistanceDisplayMaxCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardDistanceDisplayMaxCondition = newval;
        },
        billboardDistanceDisplayMinCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.billboardDistanceDisplayMinCondition = newval;
        },

        //模型样式及属性
        modelUri(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelUri = newval;
        },
        modelHeight(newVal, oldVal) {
            if (newVal == undefined) return;
            if (this.isFirst) return;
            layer.modelHeight = newVal;
        },
        modelScale(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelScale = newval;
        },
        modelColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelColor = newval;
        },
        modelLightColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelLightColor = newval;
        },
        modelHeightReference(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelHeightReference = newval;
        },
        modelDistanceDisplayMaxCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelDistanceDisplayMaxCondition = newval;
        },
        modelDistanceDisplayMinCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.modelDistanceDisplayMinCondition = newval;
        },

        //线的样式及属性
        polylinemMterial(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polylinemMterial = newval;
        },
        polylinemArcType(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polylinemArcType = newval;
        },
        polylineWidth(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polylineWidth = newval;
        },
        polylineDistanceDisplayMaxCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polylineDistanceDisplayMaxCondition = newval;
        },
        polylineDistanceDisplayMinCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polylineDistanceDisplayMinCondition = newval;
        },

        //面的属性及样式
        polygonFill(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonFill = newval;
        },
        polygonMaterial(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonMaterial = newval;
        },
        polygonOutline(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonOutline = newval;
        },
        polygonOutlineColor(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonOutlineColor = newval;
        },
        polygonOutlineWidth(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonOutlineWidth = newval;
        },
        polygonHeight(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonHeight = newval;
        },
        polygonHeightReference(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonHeightReference = newval;
        },
        polygonExtrudedHeight(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonExtrudedHeight = newval;
        },
        polygonExtrudedHeightReference(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonExtrudedHeightReference = newval;
        },
        polygonDistanceDisplayMaxCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonDistanceDisplayMaxCondition = newval;
        },
        polygonDistanceDisplayMinCondition(newval, oldval) {
            if (newval == undefined) return;
            if (this.isFirst) return;
            layer.polygonDistanceDisplayMinCondition = newval;
        },
    }
});